import {
   Input, Form, Row, Col,  Select, Space
} from "antd"

import React, { useEffect, useState } from 'react'
import { getAlgor } from "@/apis/algor"


const CollectionCreateForm = ({ onFormInstanceReady }) => {
  const [form] = Form.useForm()
  const [algorNameList, setAlgorNameList] = useState([])

  useEffect(() => {
    onFormInstanceReady(form)
    const getAlgorList = async () => {
      const res = await getAlgor()
      const algor_data = res.map((item) => {
        return {
          value: item[0],
          label: item[1]
        }
      })
      setAlgorNameList(algor_data)
    }
    getAlgorList()
  }, [form, onFormInstanceReady])

  // 选择表单改变
  const onAlgorChange = (value) => {
    // console.log(value)
  }

  // 联动选择框
  const customerNum = [50, 150, 250]
  const capacityTypes = [0, 1, 2]
  const windowTypes = [0, 1, 2, 3, 4]

  const oncNumChange = (value) => {
    // console.log(value)
  }
  const oncTypeChange = (value) => {
    // console.log(value)
  }
  const onwTypeChange = (value) => {
    // console.log(value)
  }

  return (
    <Form
      layout="vertical"
      form={form}
      validateTrigger="onBlur"
    >
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="algor_name"
            label="算法名"
            rules={[
              {
                required: true,
                message: '请选择算法',
              },
            ]}
          >
            <Select
              placeholder="请选择算法"
              onChange={onAlgorChange}
              allowClear
              options={algorNameList}
            >
            </Select>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <Space wrap>
            <Form.Item
              name="c_num"
              label="客户数"
              rules={[
                {
                  required: true,
                  message: '请选择客户数',
                },
              ]}
            >
              <Select
                style={{
                  width: 130,
                }}
                placeholder="请选择客户数"
                onChange={oncNumChange}
                options={customerNum.map((item) => ({
                  label: item,
                  value: item,
                }))}
              />
            </Form.Item>
            <Form.Item
              name="c_type"
              label="容量类型"
              rules={[
                {
                  required: true,
                  message: '请选择容量类型',
                },
              ]}
            >
              <Select
                style={{
                  width: 150,
                }}
                placeholder="请选择容量类型"
                onChange={oncTypeChange}
                options={capacityTypes.map((item) => ({
                  label: item,
                  value: item,
                }))}
              />
            </Form.Item>
            <Form.Item
              name="w_type"
              label="时间窗类型"
              rules={[
                {
                  required: true,
                  message: '请选择时间窗类型',
                },
              ]}
            >
              <Select
                style={{
                  width: 160,
                }}
                placeholder="请选择时间窗类型"
                onChange={onwTypeChange}
                options={windowTypes.map((item) => ({
                  label: item,
                  value: item,
                }))}
              />
            </Form.Item>
          </Space>

        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="s_time"
            label="停止时间"
            rules={[
              {
                required: true,
                message: '请输入停止时间',
              },
              {
                pattern: /^([1-5][0-9]|60|[5-9])$/,
                message: '请输入5-60之间的数'
              }
            ]}
          >
            <Input placeholder="请输入停止时间" maxLength={20} autoComplete="off" allowClear />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="i_time"
            label="迭代次数"
            rules={[
              {
                required: true,
                message: '请输入迭代次数',
              },
              {
                pattern: /^(1[0-9]|2[0-9]|30|[1-9])$/,
                message: '请输入1-30之间的数'
              }
            ]}
          >
            <Input
              style={{
                width: '100%',
              }}
              placeholder="请输入迭代次数"
              maxLength={100}
              autoComplete="off"
              allowClear
            />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  )
}

export default CollectionCreateForm